<template>
  <q-layout :view="viewStyle" class="full-height">
    <!-- HEADER START -->
    <q-header class="q-py-xs bg-white text-grey-8" height-hint="48" style="box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px; padding-bottom: 2px">
      <!-- 状态栏 -->
      <q-toolbar style="margin-top: -4px" class="q-electron-drag">
        <q-btn flat dense round aria-label="Menu" :icon="leftDrawerOpen === true ? 'menu_open' : 'menu'" @click="leftDrawerOpen = !leftDrawerOpen" />
        <!-- toolbar - title -->
        <toolbar-title />
        <!-- 面包屑 -->
        <breadcrumbs v-if="$q.screen.gt.sm" />
        <q-space />
        <!-- 右侧元素 -->
        <toolbar-item-right />
      </q-toolbar>

      <q-separator color="grey-3" />

      <!-- TAGVIEW -->
      <tag-view />
    </q-header>
    <!-- HEADER END -->

    <!-- slideBar START -->
    <q-drawer v-model="leftDrawerOpen" show-if-above content-class="bg-white" :width="240">
      <base-menu />
    </q-drawer>
    <!-- slideBar END -->

    <!-- container START -->
    <q-page-container class="app-main full-height">
      <!-- <transition appear enter-active-class="animated zoomIn" v-if="isChildrenMenu">
        <secondar-menu />
      </transition> -->

      <transition name="fade-transform" mode="out-in">
        <keep-alive :max="Max_keepAlive" :include="keepAliveList">
          <router-view :key="$route.fullPath" />
        </keep-alive>
      </transition>
    </q-page-container>
    <!-- container END -->
  </q-layout>
</template>

<script>
import BaseMenu from '../components/Menu/BaseMenu'
import TagView from 'components/TagView/TagView'
import Breadcrumbs from '../components/Breadcrumbs/Breadcrumbs'
import ToolbarTitle from 'components/Toolbar/ToolbarTitle'
import ToolbarItemRight from 'components/Toolbar/ToolbarItemRight'
// import SecondarMenu from '../components/Menu/SecondaryMenu'

export default {
  name: 'MainLayout',
  components: {
    ToolbarItemRight,
    ToolbarTitle,
    Breadcrumbs,
    TagView,
    BaseMenu
  },
  data () {
    return {
      viewStyle: this.$SildeBar,
      leftDrawerOpen: false,
      Max_keepAlive: this.$Max_KeepAlive,
      keepAliveList: this.$store.getters.getKeepAliveList
    }
  },
  computed: {
    // Get cache list
    getKeepAliveList () {
      return this.$store.getters.getKeepAliveList
    },
    key () {
      return this.$route.fullPath
    },
    isChildrenMenu () {
      const routeName = this.$route.name
      const route = this.$store.getters.getRoutes[0].children.find(item => item.name === routeName)
      if (route !== undefined && route.children != null && route.children.length > 0) {
        return true
      }
      return false
    }

  },
  watch: {
    getKeepAliveList (n, o) {
      this.keepAliveList = n
    }
  }
}
</script>
